require(['config'], () => {
    require(['swiper', 'jquery', 'pAjax', 'header', 'footer'], (Swiper) => {
        class List {
            constructor() {
                this.ul = document.getElementById('today_new_ul')
                this.span = document.getElementById('total')
                this.leftWindow = document.getElementById('leftWindow')
                this.top = document.getElementById('top')
                this.eve = document.getElementById('eve')
                this.init()
            }
            init() {
                up
                this.request()
                this.totalNum()
                this.banner()
                this.appear()
            }
            request() {
                pAjax({ url: '/api/goods.json' })
                    .then(data => {
                        let res = JSON.parse(data)
                        res = res.slice(0, 21)
                        this.render(res)

                    })
            }
            render(data) {
                data.forEach(item => {
                    this.ul.innerHTML += `
                    <li class="new_li">
                    <div class="img_box">
                        <a class="img_box_href" href="/html/detail.html?id=${item.goods_id}">
                            <img src="${item.img_big_logo}" alt="" class="img_box_img">
                        </a>
                    </div>
                        <div>
                            <p class="title">${item.title}</p>
                            <div class="price_box"><em>¥</em><span class="pnum">${item.price}</span> <button  data-id=${item.goods_id} class="purchase">加入购物车</button></div>
                        </div>
                </li>
                `
                })
                this.bindHtml(data)
            }
            bindHtml(data) {
                // this.ul.addEventListener()
                this.ul.onclick = (e) => {
                    let target = e.target || e.srcElement
                    if (target.nodeName == 'BUTTON') {
                        //获取对应点击按钮的id
                        let id = target.dataset.id - 0
                        //通过对比拿到数据
                        let goods = data.find(item => { return item.goods_id == id })
                        //先看购物车里面有没有数据
                        let list = JSON.parse(localStorage.getItem('cart')) || []
                        if (!list.length) {
                            list.push(goods)
                            goods.cart_number = 1
                        } else {
                            //查看数组里面有没有重复的数据
                            let res = list.some(item => { return item.goods_id == id })
                            if (res) {
                                let index = list.findIndex(item => { return item.goods_id == id })
                                list[index].cart_number++
                            } else {
                                list.push(goods)
                                goods.cart_number = 1
                            }
                        }
                        localStorage.setItem('cart', JSON.stringify(list))
                        this.totalNum()
                    }
                }
            }
            totalNum() {
                let list = JSON.parse(localStorage.getItem('cart')) || []
                let num = 0
                list.forEach(item => {
                    num += item.cart_number
                })
                this.span.innerHTML = `购物车共${num}件`
            }
            banner() {

                new Swiper('.swiper-container', {
                    direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }

                })
            }
            appear() {
                window.onscroll =()=> {
                    let res = document.body.scrollTop || document.documentElement.scrollTop;
                    if (res >= 176) {//当大于180px，按钮出现
                        this.leftWindow.style.display = 'block';
                    } else {
                        this.leftWindow.style.display = 'none';
                    }

                }
                //第二个功能，点击返回功能
                this.top.onclick = function () {
                    document.body.scrollTop = 0;
                    document.documentElement.scrollTop = 0;
                }
                this.eve.onclick = function () {
                    document.body.scrollTop = 630;
                    document.documentElement.scrollTop = 630
                }
                this.up.onclick = function () {
                    document.body.scroll = body.hight;
                    document.documentElement.scrollTop = body.hight;
                }
            }
        }
        new List
        document.getElementById("myDIV").onscroll = function () { myFunction() };

    })
})